<script lang="ts" setup>
import Selector from "@/components/Selector.vue";
import Inputter from "@/components/Inputter.vue";
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import instance from '@/utils/request';
import router from "@/router/router";
import { useAdminStore } from "@/stores/admin";

/*
    已废弃
*/

// 管理员添加客房页面
const admin = useAdminStore();

let room_id = ref("");
let room_type = ref("");
// 客房价格在价格数字后加上“元/间”
let room_price = ref("");

// 类型的下拉框（表单）
const room_type_form_options = [
  { value:'标准间', label:'标准间' },
  { value:'标准大床房', label:'标准大床房' },
  { value:'高级大床房', label:'高级大床房' },
  { value:'商务大床房', label:'商务大床房' },
  { value:'标准双床房', label:'标准双床房' },
  { value:'高级双床房', label:'高级双床房' },
  { value:'商务双床房', label:'商务双床房' },
  { value:'标准家庭房', label:'标准家庭房' },
  { value:'高级家庭房', label:'高级家庭房' }
]

interface RuleForm {
  room_id: string
  room_type: string
  room_price: string
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  room_id: '',
  room_type: '',
  room_price: ''
});

const rules = reactive<FormRules<RuleForm>>({
  room_id: [
    { required: true, message: '房间号不能为空！', trigger: 'blur' },
    { min:3, max:3, message: '请输入正确的房间号！', trigger: 'blur' }
  ],
  room_type: [
    { required: true, message: '类型不能为空！', trigger: 'blur' }
  ],
  room_price: [
    { required: true, message: '价格不能为空！', trigger: 'blur' },
    { type: 'number', message: '请输入正确的价格！', trigger: 'blur' }
  ]
});

const submitForm =  (formEl: FormInstance | undefined) => {
  // 提交表单
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      add();
    }
  });
}

function add() {
  // 添加客房
  instance.request({
    url: 'admin/roommanage/newroom/add',
    method: 'POST',
    data: {
      room_id: ruleForm.room_id,
      room_type: ruleForm.room_type,
      room_price: ruleForm.room_price + "元/间",
    },
    headers: {
      "Admin-Id": admin.admin_id,
      "Admin-Password": admin.admin_password
    }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "添加失败！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_room_id") {
          ElMessage({
            message: "房间号已被使用！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "添加成功！",
            type: "success"
          });
        }
      })
      .catch(function(error){
        console.log(error);
        if(error.response.request.status === 401) {
          ElMessage({
            message: "无权限！",
            type: "error"
          });
          admin.logout();
          router.push("/admin/index");
          return;
        }
        ElMessage({
          message: "添加失败！",
          type: "error"
        });
      });
}
</script>

<template>
  <div class="new">
    <el-form
        label-width="12vh"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
    >
      <el-form-item label="房间号：" prop="room_id">
        <inputter width="200" v-model="ruleForm.room_id"/>
      </el-form-item>

      <el-form-item label="客房类型：" prop="room_type">
        <selector :options="room_type_form_options" width="200" v-model="ruleForm.room_type"/>
      </el-form-item>

      <el-form-item label="客房价格：" prop="room_price">
        <inputter width="200" v-model.number="ruleForm.room_price"/>
      </el-form-item>


      <el-button color="#568fc1" class="button-color button-width"
                 @click="submitForm(ruleFormRef)">
        <span>添加</span>
      </el-button>
    </el-form>
  </div>
</template>

<style scoped>
.new {
  margin: 10vh;
  height: 50vh;
  /* border: 1px solid black; */
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
.button-width {
  margin-left: 4vh;
  width: 250px;
}
</style>